<link rel="stylesheet" href="tools/bootstrap-3.4.1-dist/css/bootstrap.min.css" />

<div class="container" style="position: relative;padding-top:4rem;">
	<nav id="pc_nav">
		<div class=""
			style="display: flex;justify-content:space-between;padding: 1rem;align-items: center;width: 1200px ;margin: auto;">
			<div class=""
				style="margin-right: 13rem; border-radius:0.2rem; background: #1480F9;width:4rem;height: 1.5rem;line-height: 1.5rem;text-align: center;">
				<a href="" style="color: #fff;">桃李教育</a>
			</div>
			<ul class="header_middle" style="margin: 0; display: flex;flex:2;justify-content: space-between;">
				<li>
					<a href="index.html">首页</a>
				</li>
				<li class="toggle_up" style="cursor: pointer;">
					产品与服务
					<img src="img/down_arrow_active.png" style="width: 0.5rem;height: 0.5rem;" />
				</li>
				<li>
					<a href="download.html">APP下载</a>
				</li>
			</ul>
			<div style="flex:2;text-align: right;">
				<button class=""
					style="background: #1480F9;height: 1.5rem;width: 3rem;color: #fff;border: 0;border-radius: 0.2rem;">
					
					<a href="login.html" style="color: #fff;">登录</a>
					</button>
			</div>
		</div>
		<ul class=" classifty container">
			<li class="actives"><a href="product.html">春风管理</a></li>
			<li><a href="#">桃李测试</a></li>
		</ul>
	</nav>
	<nav id="h5_nav">
		<div class="" style="display: flex;justify-content:space-between;padding: 1rem;align-items: center;">
			<div class=""
				style="margin-right: 10rem; border-radius:0.5rem; background: #1480F9;width:7rem;height: 3rem;line-height:3rem;text-align: center;">
				<a href="" style="color: #fff;">桃李教育</a>
			</div>
			<div style="flex:2;text-align: right;">
				<button class=""
					style=" background: #1480F9;height:3rem;width: 6rem;color: #fff;border: 0;border-radius: 2rem;">登录</button>
				<img class="toggle_icon" src="img/toggle_icon.png" style="width:3rem;height: 3rem;margin-left: 1rem;" />
			</div>
		</div>
	</nav>
	<div id="mobileMenuList">
		<div class="close_icon" style="text-align: right;margin-top: 1.2rem;">
			<img src="img/close_icon.png" style="width:3rem;height: 3rem;margin-right: 1rem;" />
		</div>
		<div>
			<div style="display: flex;justify-content: space-between;padding: 1rem;">
				<div style="font-size: 1.5rem;font-weight: bold;">首页</div>
				<div>
					<img src="./img/down_arrow.png" style="width: 1rem;height: 1rem;transform: rotate(270deg);" />
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;padding: 1rem;">
				<div style="font-size: 1.5rem;font-weight: bold;">产品与服务</div>
				<div>
					<img src="./img/down_arrow.png" style="width: 1rem;height: 1rem;transform: rotate(270deg);" />
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;padding: 1rem;">
				<div style="font-size: 1.5rem;font-weight: bold;">
					APP下载
				</div>
				<div>
					<img src="./img/down_arrow.png" style="width: 1rem;height: 1rem;transform: rotate(270deg);" />
				</div>
			</div>
		</div>
	</div>
</div>
<script src="tools/jQueryDownload/jquery-3.1.1.min.js"></script>
<script src="tools/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="tools/rem/index.js"></script>
<script>
	$(".topHeader").children('li').hover(function(e) {
		$(this).toggleClass("active")
	})

	$(".toggle_icon").click(function(e) {
		$('#mobileMenuList').fadeIn()
		$('#h5_nav').hide()
	})
	$(".close_icon").click(function(e) {
		$('#mobileMenuList').hide()
		$('#h5_nav').fadeIn()
	})

	$(".toggle_up").click(function(e) {

		$(this).children('img').toggleClass('rotate')
		$('.classifty').toggleClass("change")
	})
</script>


<style>
	.header_middle li a {
		color: #333;
	}

	.header_middle li a:hover {
		color: #1480F9;
	}


	.header_middle li:hover {
		color: #1480F9;
	}

	#mobileMenuList {
		display: none;
	}

	#pc_nav {
		position: fixed;
		top: 0;
		z-index: 999;
		left: 0;
		width: 100%;
		background: #fff;

	}

	#h5_nav {
		position: fixed;
		top: 0;
		z-index: 99999;
		left: 0;
		width: 100%;
		background: #fff;
	}


	@media (min-width:768px) {
		#pc_nav {
			display: inherit;
		}

		#h5_nav {
			display: none;
		}
	}

	@media (max-width:768px) {
		#pc_nav {
			display: none;
		}

		#h5_nav {
			display: inherit;
		}
	}

	#mobileMenuList {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		height: 100%;
		z-index: 999;

	}

	.classifty {
		list-style: none;
		display: none;
		justify-content: space-around;
		margin: rem 0;

	}

	.classifty li {
		padding: 0.5rem 1.5rem;
		background: #F0F0F0;
		border-radius: 0.2rem;
	}

	.change {
		display: flex;

	}

	.rotate {
		transform: rotate(180deg);
	}

	.classifty li a {

		color: #000000;

	}

	.actives {
		background: #DCECFE !important;
	}

	.actives a {
		color: #3692fa !important;
		text-decoration: none;
	}

	.active a {
		color: #3692fa !important;
	}
</style>
